<template>
  <div :class="theme">
    <p>Window Width: {{ width }}px</p>
    <p>Device Type: {{ deviceType }}</p>
    <button @click="toggleTheme">Toggle Theme</button>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    // 窗口宽度
    const width = ref(window.innerWidth);

    // 更新窗口宽度
    const updateWidth = () => {
      width.value = window.innerWidth;
    };

    // 监听窗口 resize 事件
    onMounted(() => {
      window.addEventListener('resize', updateWidth);
    });

    // 移除事件监听
    onUnmounted(() => {
      window.removeEventListener('resize', updateWidth);
    });

    // 主题状态
    const theme = ref('light');

    // 切换主题
    const toggleTheme = () => {
      theme.value = theme.value === 'light' ? 'dark' : 'light';
    };

    // 根据窗口宽度计算设备类型
    const deviceType = computed(() => {
      return width.value < 768 ? 'mobile' : 'desktop';
    });

    return {
      width,
      theme,
      deviceType,
      toggleTheme,
    };
  },
};
</script>

<style>
.light {
  background-color: white;
  color: black;
}

.dark {
  background-color: black;
  color: white;
}
</style>